<!DOCTYPE html>
<html>
	<head>
		<!--meta元数据 ,charset字符集-->
		<meta charset="utf-8">
		<title>永和小票</title>
		<!-- 样式设计写在style标签中，key:value-->
		<style>
		body{/*整个页面的样式修饰*/
			width:260px;
			font-size: 10px;
		}
		/*solid 实线，dashed虚线 */
		hr{border:1px dashed ;
			
		}
         /*对应的单独样式进行设置
		 class使用.引用
		 id    使用#引用
		 */
		#p{
		font-size: 15px;	
		font-weight: bold;/*加粗*/
				}
		.self{/*padding表示修饰四周，上右下左（顺时针一圈）空
		padding-left让左边空一定距离*/
			padding-left: 30px;
		}
		.note{
			/*padding-bottom: 5px; 下空
			padding-top: 20px;上空*/
			margin-top: 20px;
			margin-bottom: 5px;
		}
		.images{
			padding-left: 20px;
				}
			
		</style>
	</head>
	<body>
		<!--div标签会自动换行，span不换行:块，实现页面布局 -->
		<div>顾客联</div>
        <div id="p">请您把账单吃了</div>
		
        <div class="self">自取顾客联</div>		
	  	<div>永和大王（达内科技）</div>
		<div>123456</div>
		<div class="self">--结账单--</div>
		<div id="p">账单号:P000010</div>
	    <div>账单类型:食堂</div>
		<div>人数:1</div>
		<div>收银员:陈子枢</div>
		<div>开票时间:2020-01-02 08:30:56</div>
		<div>结账时间:2020-01-02 08:31:55 </div>
		<hr/>
		<!--表格是没有列的概念，他叫单元格
		页面中换行会解析为一个空格
		table表格 、tr行 、td单元格
		aligin横向排列 :left、center、right
		valigin纵向排列:top、center、bottom
		
		-->
         <table border="0">
	     <tr>
			 <td width="50">数量</td>
			 <td width="166">品项</td>
			 <td width="50"align="right">金额</td>
		 </tr>
		 <tr>
			 <td valign="top">1</td>
			 <!--网页中没有换行，主动换行br/ -->
			 <td>玉米肉松鸡蛋饼2p<br/>
			 1x--玉米饼<br/>
			 1x--现磨豆浆（热/甜）</td>
			 <td valign="top"align="right">8.00</td>
		 </tr>
         </table>
		 <hr/>
		<table border="0" >
			<tr>
				<td width="222">合计</td>
				<td width="50" align="right">8.00</td>
			</tr>
			<tr>
				<td>微信支付</td>
				<td align="right">8.00</td>
			</tr>
		</table>
		<hr/>
		
		<div>打印时间:2020-01-02 08:31:66</div>
				
		<hr/>
	
		<!--&nbsp;代表空格、7空格等价于2个汉字距离-->
		<div class="note">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
		</div>
		<h2><div align="center">买不买！！！</div></h2>
		
		<!-- src配置图片来源，相对路径，从自己html文化出发去找-->
		<img class="images" src="images/1.jpg" width="200" height="200"/>
	    <div>官网:www.tentu.com.cn</div>  
		<div>加盟热线:123465978</div>
	
	<br/><br/>
	</body>
</html>

